<#import "PageTemplate.ftl" as p> 

<@p.page>
<div class="page-header">
	  <h1 class="form-signin-heading">Please fill the registration form</h1>
</div>

<div class="input-group"><span class="input-group-addon">E-Mail: </span><input id="inputEmail" type="text" class="form-control" placeholder="Your e-mail address" value=""></input></div>
<br />
<div class="input-group"><span class="input-group-addon">Password: </span><input id="inputPassword" type="password" class="form-control" placeholder="Your password" value=""></input></div>
<br />
<div class="input-group"><span class="input-group-addon">Confirm Password: </span><input id="inputPassword2" type="password" class="form-control" placeholder="Your password" value=""></input></div>
<br />
<div class="input-group"><span class="input-group-addon">First Name(s): </span><input id="inputFirstName" type="text" class="form-control" placeholder="Your first name(s)" value=""></input></div>
<br />
<div class="input-group"><span class="input-group-addon">Last Name(s): </span><input id="inputLastName" type="text" class="form-control" placeholder="Your last name(s)" value=""></input></div>
<br />
<div class="input-group"><span class="input-group-addon">Group: </span><select id="inputGroup" class="form-control" placeholder="Select a group">
<#list groups as g>
<option value="${g.uri}"><#if g.label??>${g.label?html}<#else>${g.shortUri?html}</#if></option>
</#list>
</select></div>
<br />
<button id="registerButton" class="btn btn-lg btn-primary btn-block" type="submit">Register</button>
 

<script>
$(document).ready(function() {
	$("#registerButton").click(function (event) {
	    event.preventDefault(); // Don't let this button submit the form
	    $('.alert-error').hide();
	    
	    var p = $('#inputPassword').val();
	    var p2 = $('#inputPassword2').val();
	    if(p.length < 5)  {
	   		$('.alert-error').text('The password must contain at least 5 characters!').show();
	   		return;
	   	}
	   	if(p != p2) {
	   		$('.alert-error').text('The passwords must match!').show();
	   		return;
	   	}
	   	
		AccountManager.register($('#inputEmail').val(), p, $('#inputFirstName').val(), $('#inputLastName').val(), $('#inputGroup').val(), function() {
			window.location.href = '/';
		});
	});
});
</script>

</@p.page>